<template>
  <div>
    <div class="center">
      <!-- 头部 -->
      <div class="table_header flex flex_bet flex-wrap">
        <div class="table_button">
          <el-button type="primary" icon="el-icon-refresh" size="mini" @click="Refresh"></el-button>
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="addLogo">添加</el-button>
        </div>
        <div class="table_searchs flex">
          <div class="table_search flex">
            <el-input placeholder="搜索" v-model="searchInput" class="input-with-select" size="small">
              <el-select v-model="select" slot="prepend" placeholder="请选择" class="table_select" style="width:105px">
                <el-option label="域名" value="1"></el-option>
              </el-select>
              <el-button slot="append" icon="el-icon-search" @click="idnameSearch"></el-button>
            </el-input>
          </div>
          <dynamicTable :checkboxVal="checkboxVal" @alter="alterCheckbok" />
        </div>
      </div>
      <!-- table -->
      <el-table stripe style="width: 100%" :data="tableData" :key="key" border fit highlight-current-row ref="tableDataRef">
        <el-table-column v-if="colData[0].istrue" min-width="50" align="center" prop="id" label="ID"></el-table-column>
        <el-table-column v-if="colData[1].istrue" min-width="120" align="center" prop="simple_name" label="简称"></el-table-column>
        <el-table-column v-if="colData[2].istrue" min-width="120" align="center" prop="domain_name" label="域名"></el-table-column>
        <el-table-column v-if="colData[3].istrue" min-width="120" align="center" prop="home_logo" label="图标">
          <template slot-scope="scope">
            <el-image v-if="scope.row.wallpaper!== ''" style="width: 100px; background-color: black" :src="scope.row.home_logo" fit="fill"></el-image>
          </template>
        </el-table-column>
        <el-table-column v-if="colData[4].istrue" min-width="120" align="center" prop="icp" label="备案号"></el-table-column>
        <el-table-column v-if="colData[5].istrue" min-width="140" align="center" prop="company_name" label="公司名称"></el-table-column>
        <el-table-column v-if="colData[6].istrue" min-width="80" align="center" prop="admin_name" label="创建人"></el-table-column>
        <el-table-column v-if="colData[7].istrue" min-width="140" align="center" prop="create_time" label="创建时间">
          <template slot-scope="scope">{{scope.row.create_time| newDate}}</template>
        </el-table-column>
        <el-table-column min-width="150" align="center" prop="log" label="操作">
          <template slot-scope="scope">
            <el-row>
              <el-button size="mini" type="primary" @click="openEdit(scope.row)">编辑</el-button>
              <el-button size="mini" @click="getdeleteLogoImg(scope.row.id)">删除</el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="paging">
        <el-pagination background :current-page.sync="listQuery.startSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 50, 100, 200]" layout="total, sizes, prev, pager, next, jumper" :total="total" :page-size="listQuery.pageSize">
        </el-pagination>
      </div>
      <!-- 删除弹窗 -->
      <delete-Dialog title="" :visible.sync="deleteDialogs.show" width="25%" top="40vh" @deleteEvents="deleteEvents" :deleteText="deleteDialogs.deleteText" />
    </div>

    <el-dialog :title="compileBtn ? '添加域名' : '编辑域名'" :visible.sync="logShow" width="30%" :close-on-click-modal="false" :close-on-press-escape="false" @close="redactFormclose">
      <el-form :model="addForm" ref="ruleForm" :rules="rules">
        <el-form-item label="简称:" label-width="100px" prop="simple_name">
          <el-input v-model="addForm.simple_name" placeholder="请输入品牌简称"  style="width: 200px"></el-input>
        </el-form-item>

        <el-form-item label="域名:" label-width="100px" prop="domain_name">
          <el-input v-model="addForm.domain_name" placeholder="请输入域名"  style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="备案信息:" label-width="100px" prop="icp">
          <el-input v-model="addForm.icp" placeholder="请输入icp备案号"  style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="公司名称:" label-width="100px" prop="company_name">
          <el-input v-model="addForm.company_name" placeholder="请输入公司名称"  style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="图标:" label-width="100px" prop="home_logo">
          <el-upload
            class="avatar-uploader"
            action
            :auto-upload="false"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload"
            :on-change="logoUpload"
          >
            <img v-if="addForm.home_logo" :src="addForm.home_logo" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="logShow  = false" size="mini" round>取 消</el-button>
        <el-button v-if="compileBtn" type="primary" size="mini" round @click="getAddSnAllowControl('ruleForm')">添加</el-button>
        <el-button v-else type="primary" size="mini" round @click="getEditSimControl('ruleForm')">修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import dynamicTable from "@/components/DynamicTable";
import objectable from "@/utils/objectable.js";
import deleteDialog from "@/components/deleteDialog";
import {ossImage} from "@/utils/ossUpload";
import {addDomainLogo, delDomainLogo, editDomainLog, queryDomainLog} from "@/api/system";
export default {
  components: { dynamicTable, deleteDialog },
  data() {
    return {
      checkboxVal: ['ID', '简称', '域名',  '图标','备案号', '公司名称', '创建人', '创建时间'],
      key: 1,
      colData: [], //动态控制table
      total: 0,
      searchInput: "",
      select: "1", //搜索条件
      //归属table
      tableData: [],
      logShow: false,
      listQuery: { userId: localStorage.getItem("ID"), startSize: 1, pageSize: 10, username: undefined, sn_five: ''},
      batchData: [],
      addForm: {
        simple_name: '',
        home_logo: '',
        domain_name: '',
        icp: '',
        company_name: ''
      },
      rules: {
        simple_name: [{ required: true, message: "请输入品牌简称", trigger: "blur" }],
        home_logo: [{ required: true, message: "请上传logo", trigger: "blur" }],
        domain_name: [{ required: true, message: "请输入域名", trigger: "blur" }],
        icp: [{ required: true, message: "请输入icp备案信息", trigger: "blur" }],
        company_name: [{ required: true, message: "请输入公司名称", trigger: "blur" }],
      },
      deleteDialogs: { show: false, deleteText: '', deleteId: 0 },
      compileBtn: false,
      dialogFormVisible: false,
      fileList: [],
    }
  },
  created() {
    this.colData = objectable(this.checkboxVal, this.checkboxVal); //转为数组对象，好控制table
    this.getDomainLogo()
  },
  methods: {
    //删除
    getdeleteLogoImg(id) {
      this.deleteDialogs.show = true
      this.deleteDialogs.deleteId = id
    },
    //删除按钮事件
    deleteEvents() {
      let params = { userId: localStorage.getItem("ID"), last_ip: sessionStorage.getItem("Ip"), id: this.deleteDialogs.deleteId }
      delDomainLogo(params).then(res => {
        this.$message.success(res.msg)
        this.getDomainLogo()
      })
    },
    redactFormclose() {
      this.addForm = this.$options.data().addForm
    },
    openEdit(row){
      this.logShow = true
      this.compileBtn = false
      this.addForm  = {
        simple_name: row.simple_name,
        home_logo: row.home_logo,
        domain_name: row.domain_name,
        icp: row.icp,
        company_name: row.company_name,
        id: row.id
      }
    },
    getEditSimControl(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          editDomainLog(this.addForm).then(res => {
            this.$message.success(res.msg)
            this.getDomainLogo()
            this.logShow = false
          }).catch(err => { })
        } else {
          return false
        }
      })
    },
    //添加按钮
    addLogo() {
      this.logShow = true
      this.compileBtn = true
    },
    getAddSnAllowControl(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.addForm.userId = localStorage.getItem("ID")
          this.addForm.last_ip = sessionStorage.getItem("Ip")
          addDomainLogo(this.addForm).then(res => {
            this.$message.success(res.msg)
            this.getDomainLogo()
            this.logShow = false
          }).catch(err => { })
        } else {
          return false
        }
      })
    },
    getDomainLogo(){
      queryDomainLog(this.listQuery).then(res => {
        this.tableData = res.data
        this.total = res.total
      }).catch(err => {
        this.total = 0
        this.tableData = []
      })
    },

    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getDomainLogo();
    },
    handleCurrentChange(val) {
      this.listQuery.startSize = val
      this.getDomainLogo();
    },
    Refresh() {
      this.listQuery = { userId: localStorage.getItem("ID"), startSize: 1, pageSize: 10, username: undefined }
      this.getDomainLogo()
    },
    idnameSearch() {
      if (!this.select) return this.$message.warning("请先选择查询条件");
      this.listQuery.startSize = 1
      this.listQuery.pageSize = 10
      switch (this.select) {
        case '1':
          this.listQuery.domain_name = this.searchInput
          this.getDomainLogo();
          break;
      }
    },
    //下拉动态table子组件
    alterCheckbok(key, conte) {
      this.key = key;
      this.colData.filter(i => {
        if (conte.indexOf(i.title) != -1) {
          i.istrue = false;
          this.$nextTick(() => {
            this.$refs.tableDataRef.doLayout();
          });
        } else {
          i.istrue = true;
          this.$nextTick(() => {
            this.$refs.tableDataRef.doLayout();
          });
        }
      });
    },
    beforeAvatarUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 1;
      if (!isLt1M) {
        this.$message.error('上传图片大小不能超过 1MB!');
      }
      return isLt1M;
    },
    logoUpload(res, file) {
      ossImage(res.raw,res.name).then(res => {//图片上传
        this.addForm.home_logo = res
      }).catch(err => {
        this.$message.error("图标上传失败")
      })
    },
  }
}
</script>


<style lang="scss" scoped>

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 247px;
  height: 98px;
  line-height: 98px;
  text-align: center;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
}
.avatar {
  width: 247px;
  height: 98px;
  display: block;
  background-color: black;
}
</style>
